<template>
  <v-app>
    <template v-if="!$route.meta.noLayout">
      <v-navigation-drawer app>
        <Menu></Menu>
      </v-navigation-drawer>

      <v-app-bar app color="primary">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>Collapsing Bar</v-toolbar-title>
        <!-- -->
        <v-spacer></v-spacer>
        <span name="AAz">{{ userName }}</span>
        <v-icon>md-user</v-icon>
        <v-btn @click="isShowLogoutDialog = true"><v-icon>
            mdi-logout
          </v-icon>登出</v-btn>
      </v-app-bar>
      <ConfrimDialog :show="isShowLogoutDialog" :ok="logoutOk" text="是否确认登出?" title="提示"
        @cancal="isShowLogoutDialog = false" />
      <!-- 根据应用组件来调整你的内容 -->
      <v-main>
        <!-- 给应用提供合适的间距 -->
        <v-container fluid>
          <!-- 如果使用 vue-router -->
          <router-view></router-view>
        </v-container>
      </v-main>

      <v-footer app>
        <v-col class="text-center" cols="12">
          {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
        </v-col>
      </v-footer>

    </template>
    <template v-else>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </template>
  </v-app>
</template>

<script>
import Menu from '@/views/Menu/Menu.vue'
import Tab from '@/components/Tab.vue'
import ConfrimDialog from '@/components/ConfrimDialog.vue';
import utils from './utils'
import userManager from './oidc'
export default {
  name: 'App',
  components: {
    Menu,
    Tab,
    ConfrimDialog
  },
  data() {
    return {
      isShowLogoutDialog: false
    }
  },
  methods: {
    async logoutOk() {
      utils.removeTokenInfo()
      await userManager.signoutRedirect();
    }
  },
  computed: {
    userName() {
      const user = utils.getUserInfo();
      if (user) {
        return user.name;
      }
    }
  },
  mounted() {
    this.$http.get(`connect/userinfo`).then(r => {
      utils.setUserInfo(r)
    }, error => {

    })
  }
};
</script>